<!-- 创建周期 -->
<template>
	<view class="content">
		<view class="title">年度名称</view>
		<view class="input">
			<input type="text" placeholder="请输入名称" placeholder-style="font-size: 32upx; color:#CCCCCC;" v-model="yearName"/>
		</view>
		<view class="title">设置参数</view>
		<view class="select">
			<view class="select_item" v-for="(value,index) in selectList" :key="index">
				<view class="select_item_left">{{value.name}}</view>
				<block v-if="index != 2">
					<picker class="select_item_right" mode="date" @change="bindChangeDate(index, $event)">
						<view class="picker">
							<view :class="[value.selectName !== '请选择' ? 'cr': '']">{{value.selectName}}</view>
							<i class='iconfont icon-fanhui'></i>
						</view>
					</picker>
				</block>
				<block v-else>
					<view class="picker">
						<view style='color:#CCCCCC;'>{{getPried}}</view>
					</view>
				</block>
			</view>
		</view>
		<view class="btn" @click="addSchedule">完成创建</view>
		<view class="per-tip">
			<text>提示：开始日期是星期一,结束日期是星期天才可以创建周期, 并且选择的年度不能和原来的年度时间冲突哦~</text>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				selectList: [{
						name: '开始日期',
						selectName: '请选择'
					}, {
						name: '结束日期',
						selectName: '请选择'
					},
					{name: '周数'},
				],
				array_index: '',
				yearName: '', // 周期名称
			}
		},
		// 进去周期
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: './period-list'
			})
		},
		methods: {
			// 监听开始日期/结束日期
			bindChangeDate(index, e) {
				this.selectList[index].selectName = e.detail.value
				
			},
			
			// 完成创建
			addSchedule() {
				let yearStart = this.selectList[0].selectName // 开始日期
				let yearEnd = this.selectList[1].selectName  // 结束日期
				let yearName = this.yearName  // 周期名称 
				let stuId =uni.getStorageSync('currentChild').student_id // 学生ID
				// 完成创建之前确保有输入值
				if (yearName.trim() === '') {
					return this.showToast('请输入周期名称')
				}
				if (yearStart === '请选择') {
					return this.showToast('请选择开始日期')
				}
				if (yearEnd === '请选择') {
					return this.showToast('请选择结束日期')
				}
				
				// 开始创建
				this.$capi.apiPost('/stuYear/insertYear', {
					yearName, 
					yearStart, 
					yearEnd, 
					stuId, 
					reqMethod: 2
				}).then(res => {
					// 创建成功则后退跳转，否则弹出提示
					(res.data.code == 200) ? uni.navigateBack() : this.showToast('请搭配合理时间')
				})
			},
			
			// 封装吐司
			showToast(title, icon = 'none') {
				uni.showToast({
					title: title,
					icon: icon
				})
			}
		},
		computed: {
			// 当开始日期和结束日期有值了，则周数就会显示出来
			getPried() {
				if (this.selectList[0].selectName === "请选择" || this.selectList[1].selectName === "请选择") {
					return '请设置开始/结束日期'
				} else {
					let star_date = new Date(`${this.selectList[0].selectName.replace(/-/g, '/')} 00:00:00`).getTime() / 1000
					let end_date = new Date(`${this.selectList[1].selectName.replace(/-/g, '/')} 00:00:00`).getTime() / 1000
					let resulet = end_date - star_date
					return Math.ceil(parseInt(resulet / 86400) / 7)
				}
			}
		}
	}
</script>

<style>
	.content {
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(250, 250, 250, 1);
	}

	.title {
		width: 96%;
		height: 90upx;
		line-height: 90upx;
		margin-left: 4%;
		font-size: 32upx;
		color: rgba(102, 102, 102, 1);
	}

	.input {
		width: 100%;
		height: 80upx;
		background: #FFFFFF;
		font-size: 32upx;
		color: #666666;
	}

	.input input {
		width: 96%;
		margin-left: 4%;
		height: 100%;
	}

	.select {
		width: 100%;
		background: rgba(255, 255, 255, 1);
	}

	.select_item {
		width: 92%;
		height: 92upx;
		margin: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid rgba(229, 229, 229, 1);
	}

	.select_item_left {
		width: 50%;
		font-size: 32upx;
		color: rgba(51, 51, 51, 1);
	}

	.select_item_right {
		width: 50%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font: 32upx;
		color: rgba(204, 204, 204, 1);
	}

	.select_item_right i {
		font-size: 18upx;
		margin-left: 10upx;
		color: #C2C2C2;
	}

	.select_item:last-child {
		border-bottom: none;
	}

	.btn {
		width: 92%;
		height: 80upx;
		margin: auto;
		background: #FF9900;
		border-radius: 8upx;
		color: #FFFFFF;
		font-size: 34upx;
		line-height: 80upx;
		text-align: center;
		margin-top: 62upx;
	}

	.picker {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.font_color {
		color: #333333;
	}
	
	
	/* 字体激活样式 */
	.cr{
		color: #333333;
	}
	
	
	.per-tip{
		margin-top: 60upx;
		padding: 30upx;
		/* text-align: center; */
		color: rgb(204, 204, 204);
	}
</style>
